CSS水平垂直居中

水平居中

inline/inline-*

• 父级是块级元素，text-align:center;

块级元素

• 方式一：子元素width+margin-left/right:auto;

• 方式二：inline-block，父级text-align:center，子元素display:inline-block;

• 方式三：flexbox，父级display:flex+justify-content:center;

垂直居中

inline/inline-*

• 单行

  • 方式一：padding-top和padding-bottom相同；
  • 方式二：height和line-height相同，white-space: nowrap;

• 多行

  • 方式一：利用table+td，td设置vertical-align: middle;
  • 方式二：父级display: table，子元素display: table-cell+vertical-align: middle;
  • 方式三：flexbox，display: flex+justify-content: center+ flex-direction: column;
  • 方式四：flexbox，display: flex+align-items: center;

块级元素

• 已知height
  1. 父级position: relative;
  2. 子元素position: absolute+top: 50%+margin-top:-1/2*height;
• 未知height
  1. 父级position: relative;
  2. 子元素position: absolute+top: 50%+transform: translateY(-50%);
• 同垂直居中中inline/inline-*的多行;
• 使用grid;

参考链接：https://css-tricks.com/centering-css-complete-guide/